<!-- ������Ʒ -->
<template>
	<view class="commodity" :style="computedWrap">
		<view class="commodity-item" :style="computeditemW" v-for="(item,index) in dataList" :key="index"
			@tap="goDetail(item.id)">
			<image class="commodity-img" :style="computedimgH" :src="item.imgUrl"></image>
			<view class="commodity-content">
				<text class="commodity-name">
					<text class="tag">特惠选</text>
					{{item.name}}
				</text>
				<div class="desc">
					{{item.desc}}
				</div>
				<view class="price-wrap">
					<text class="oprice">{{item.oprice}}</text>
					<text class="pprice">{{item.pprice}}</text>
				</view>
				<!-- <text class="discount">{{item.discount}}</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// ����
			dataList: Array,
			// ��������
			itemW: {
				type: String,
				default: "345rpx"
			},
			// ͼƬ�߶�
			imgH: {
				type: String,
				default: "345rpx"
			},
			// �Ƿ�����
			wrap: {
				type: String,
				default: "wrap"
			}
		},
		methods: {
			calDiscount() {
				this.dataList.forEach(el => {
					let present = el.pprice.substring(0, el.pprice.length - 1)
					let old = el.oprice.substring(0, el.oprice.length - 1)
					el.discount = `${Math.floor(present*100/old)}% Off`
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				})
			}
		},
		beforeMount() {
			this.calDiscount()
		},
		computed: {
			computedWrap() {
				return `flex-wrap: ${this.wrap};`
			},
			computeditemW() {
				return `width:${this.itemW};`
			},
			computedimgH() {
				return `height:${this.imgH};`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.commodity {
		display: flex;
		justify-content: space-around;
		font-size: 32rpx;
		padding: 0 10rpx;

		.commodity-item {
			background-color: #fff;
			padding-bottom: 10rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.commodity-img {
				width: 100%;
				height: 300rpx;
				border-radius: 20rpx;
			}

			.commodity-content {
				text-align: center;

				.tag {
					background-color: #17D46B;
					color: #fff;
					border-radius: 10rpx;
					padding: 5rpx;
					font-size: 22rpx;
					margin-right: 8rpx;
				}

				.desc {
					color: #aaa;
					font-size: 28rpx;
					text-align: left;
					padding: 0 10rpx;
				}

				.commodity-name {
					text-align: left;
					white-space: normal;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					color: #333;
					word-break: break-all;
					padding: 6rpx 10rpx;
				}

				.price-wrap {
					padding: 6rpx 0;
					display: flex;
					justify-content: left;
					align-items: center;
					color: #ff3333;

					.oprice {
						text-decoration: line-through;
						font-size: 26rpx;
						transform: scale(0.8);
						color: #aaa;
					}
				}

				.discount {
					border-radius: 16rpx;
					border: 1px solid #ff3333;
					padding: 0 6rpx;
					font-size: 16rpx;
					color: #ff3333;
					transform: scale(0.8);
				}
			}
		}
	}
</style>